import React, {FC, useContext, useEffect} from 'react';
import "./index.less";
import {Col, Row} from "antd";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {FormattedMessage} from "umi";
import {correspVal} from "@/utils/biz";


interface AboutPageProps {
}

const AboutStatistic = (prop: {
  title: React.ReactNode,
  value: API.EntityId,
  unit: React.ReactNode
}) => {
  return (
    <div className={"hxiw-about-statistic"}>
      <div className={"hxiw-about-statistic-value"}>{prop.value} <span>{prop.unit}</span></div>
      <div className={"hxiw-about-statistic-title"}>{prop.title}</div>
    </div>
  )
}

const AboutPage: FC<AboutPageProps> = (props) => {

  const {setLayoutBgClassName, siteInfo, isZhCN} = useContext(HxConfigContext)
  useEffect(() => {
    setLayoutBgClassName?.("bg-bule-328");
    return () => {
      setLayoutBgClassName?.(undefined);
    }
  }, []);


  return (
    <div className={"hxiw-about-page-container"}>
      <div className={"hxiw-about-page-title"}><FormattedMessage id="about.understand"/></div>
      <div className={"hxiw-about-statistics-wrapper hxiw-about-card"}>
        <Row gutter={16}>
          <Col span={6}><AboutStatistic title={<FormattedMessage id="about.stats.established"/>} value={siteInfo?.establishYear || 2006}
                                        unit={<FormattedMessage id="about.stats.year"/>}/></Col>
          <Col span={6}><AboutStatistic title={<FormattedMessage id="about.stats.journal-publishing"/>} value={siteInfo?.journalNum || 14}
                                        unit={<FormattedMessage id="about.stats.kind"/>}/></Col>
          <Col span={6}><AboutStatistic title={<FormattedMessage id="about.stats.cn-journal-publishing"/>} value={siteInfo?.journalCnNum || 9}
                                        unit={<FormattedMessage id="about.stats.kind"/>}/></Col>
          <Col span={6}><AboutStatistic title={<FormattedMessage id="about.stats.en-journal-publishing"/>} value={siteInfo?.journalEnNum || 5}
                                        unit={<FormattedMessage id="about.stats.kind"/>}/></Col>
        </Row>
      </div>
      <div className={"hxiw-about-description  hxiw-about-card"}
           dangerouslySetInnerHTML={{__html: correspVal(isZhCN, siteInfo?.content.textCn, siteInfo?.content.textEn) || ""}}/>
    </div>
  );
};

export default AboutPage;
